<template>
	<navigatorComp title="添加传记" bgcColor="#121512" fontColor="#fff"></navigatorComp>
	<view class="content">
		<view class="con">
			<up-input
				v-model.trim="formData.subject"
				border="none"
				placeholderClass="plClass_"
				count
				maxlength="30"
				placeholder="输入标题(不超过30个字符)"
				fontSize="32rpx"
				color="#fff"
			/>
			<view class="line"></view>
			<up-textarea
				disableDefaultPadding
				:adjustPosition="false"
				v-model.trim="formData.content"
				border="none"
				height="500rpx"
				placeholderClass="plClass"
				count
				:maxlength="500"
				placeholder="输入正文..."
			></up-textarea>
			<Upload
				ref="uploadRef"
				:list="formData.imageUrl"
				@sendImgList="sendImgList"
				:addColor="'#999999'"
				:backgroundColor="'#666666'"
				:isMargin="true"
				:upLength="9"
				:formData="{
					fileType: 'image',
					fileDirType: 'hall'
				}"
			/>
		</view>
		<footerBtn
			:btnDisable="btnDisable"
			name="保存"
			@clickBtn="submit"
			bgcColor="#121512"
		></footerBtn>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import navigatorComp from '/components/navigator/index.vue';
import { ref, reactive, computed } from 'vue';
import footerBtn from '/components/footerBtn/index.vue';
import Upload from '@/components/upload/upload.vue';
import HomeApi from '@/API/home/index.js';

const homeApi = new HomeApi();
const btnDisable = computed(() => {
	if (formData.subject.trim() && formData.content.trim()) {
		return false;
	} else {
		return true;
	}
});

onLoad((o) => {
	if (o.dataObj) {
		formData.hallId = uni.getStorageSync('hallId');
		formData.lifeId = JSON.parse(o.dataObj).lifeId;
		formData.subject = JSON.parse(o.dataObj).subject;
		formData.content = JSON.parse(o.dataObj).content;
		formData.imageUrl = JSON.parse(o.dataObj).imageUrl;
		setTimeout(() => {
			uploadRef.value.img_list = String(JSON.parse(o.dataObj).imageUrl).split(',');
		}, 200);
	}
});
const uploadRef = ref();
const formData = reactive({
	hallId: uni.getStorageSync('hallId'),
	lifeId: '0', //如果是创建就为0）,非0 就是修改
	subject: '',
	content: '',
	imageUrl: ''
});
const submit = () => {
	if (btnDisable.value) {
		return;
	}
	homeApi
		.addHallLifeApi(formData)
		.then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: '添加成功'
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			}
		})
		.catch(() => {});
};
const sendImgList = (e) => {
	formData.imageUrl = e;
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	overflow: hidden;
	box-sizing: border-box;
}

.content {
	// padding: 0;
	// background-color: #121512;
	padding: 0 1rem 1rem;
	width: 100%;
	height: calc(100vh - var(--window-bottom) - 1rem);
	box-sizing: border-box;
	overflow: auto;

	.con {
		margin-top: 32rpx;
		padding: 32rpx;
		background-color: #292b2a;
		z-index: 9999;
		border-radius: 8rpx;
	}

	.line {
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 1px solid #333333;
		margin-top: 32rpx;
	}
}

::v-deep.uni-input-input {
	color: #fff;
	font-size: 32rpx;
}

::v-deep .u-textarea {
	background-color: #292b2a !important;
	color: #fff;
	margin-bottom: 32rpx;
	padding: 32rpx 0rpx 70rpx 0rpx !important;
}

::v-deep .u-textarea__field {
	color: #fff !important;
	font-size: 28rpx !important;
	text-align: justify !important;
}

::v-deep.u-textarea__count {
	background: none !important;
	bottom: 16rpx !important;
	right: 16rpx !important;
	font-size: 28rpx !important;
}

.plClass_ {
	color: #969da3 !important;
	font-size: 32rpx;
}

.plClass {
	color: #969da3 !important;
	font-size: 28rpx;
}
</style>
